<template>
  <div class="header-warp">
    <div class="logo" @click="router.push('/')">
      <img src="@assets/logo.png" alt="" style="height: 50px" />
    </div>
    <div class="nav">
      <div class="tabs">
        <div
          class="tabs-button"
          :class="route.path == '/homepage' ? 'isActived' : 'noActive'"
          @click="router.push('/homepage')"
        >
          <n-icon size="20">
            <Home16Regular />
          </n-icon>
          <span>首页</span>
        </div>
        <div
          class="tabs-button"
          :class="route.path.includes('/forum') ? 'isActived' : 'noActive'"
          @click="router.push('/forum/list/0')"
        >
          <n-icon size="20">
            <BookQuestionMark24Regular />
          </n-icon>
          <span>问题</span>
        </div>
      </div>
      <div class="search">
        <div class="search-item">
          <n-input-group>
            <n-select
              style="width: 170px"
              v-model:value="searchParams.key"
              :options="options"
              size="large"
            ></n-select>
            <n-input
              style="width: 490px"
              size="large"
              :placeholder="getPlaceholder"
              v-model:value="searchParams.content"
              autofocus
              @keyup.enter="searchFunc"
            >
              <template #suffix>
                <n-button @click="searchFunc" text>
                  <n-icon size="24"><search /></n-icon>
                </n-button>
              </template>
            </n-input>
          </n-input-group>
          <!-- <n-input placeholder="搜索学者、成果、项目">
            <template #prefix>
              <n-icon :component="Search20Filled" />
            </template>
          </n-input> -->
        </div>
      </div>
      <div class="user">
        <n-button circle size="large" @click="router.push('/message')">
          <template #icon>
            <n-icon>
              <Messages />
            </n-icon>
          </template>
        </n-button>
        <span class="avatar-box">
          <span class="avatar" @click="toProfile">
            <img :src="avatar" />
          </span>
          <span class="arrow">
            <n-dropdown
              trigger="click"
              placement="bottom-start"
              :options="profileOptions"
              @select="handleSelect"
            >
              <n-icon size="15" style="transform: rotate(270deg)">
                <ArrowBackIosNewRound />
              </n-icon>
            </n-dropdown>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  BookQuestionMark24Regular,
  Home16Regular,
  Search20Filled
} from '@vicons/fluent'
import { Messages } from '@vicons/tabler'
import { ArrowBackIosNewRound } from '@vicons/material'
import { Search } from '@vicons/ionicons5'
import api from '@/api/api'
import { useRoute } from 'vue-router'
const route = useRoute()
const searchParams = reactive({
  key: route.query.key || 'name',
  content: route.query.content
})

const getPlaceholder = computed(() => {
  return searchParams.key === 'question'
    ? '按问题标题搜索'
    : `按${
        options.value.find((item) => item.value === searchParams.key).label
      }搜索科研人员`
})

const searchFunc = () => {
  if (searchParams.key === 'question') {
    router.push({
      path: `/forum/list/0?content=${searchParams.content}`,
      query: searchParams
    })
  } else
    router.push({
      name: 'Expert',
      params: searchParams,
      query: searchParams
    })
}

const options = ref([
  {
    label: '人员姓名',
    value: 'name'
  },
  {
    label: '所属机构',
    value: 'institution'
  },
  {
    label: '研究领域',
    value: 'field'
  },
  {
    label: '研究成果',
    value: 'researchTitle'
  },
  {
    label: '问题',
    value: 'question'
  }
])
const router = useRouter()

const message = useMessage()

const avatar = ref('')
//下拉框
const profileOptions = [
  {
    label: '登出',
    key: 'logout'
  }
]
//下拉框回调函数
const handleSelect = function (key) {
  if (key === 'logout') {
    api.Entry.logout().then((res) => {
      if (res.success) {
        localStorage.clear()
        message.success('已登出')
        router.push('/')
      } else {
        message.error(res.msg)
        localStorage.clear()
      }
    })
  }
}

const toProfile = () => {
  const uid = localStorage.getItem('id')
  router.push({ name: 'Profile', params: { id: uid } })
}

onMounted(() => {
  api.Entry.islogin().then((res) => {
    if (res.success) {
      let avatarSrc = localStorage.getItem('avatar')
      if (avatarSrc) {
        avatar.value = avatarSrc
      }
    } else {
      message.error('用户未登录')
      localStorage.clear()
      router.push('/')
    }
  })
})
</script>

<style lang="scss" scoped>
.header-warp {
  height: 72px;
  display: flex;
  align-items: center;
  /* border-bottom: 1px solid #ddd; */
  border-bottom: 1px solid #ddd;
}

.logo {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid #ddd;
  background: #ffa157;
  cursor: pointer;
}

.nav {
  width: 100%;
  height: 100%;
  display: flex;
}

.tabs {
  height: 100%;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: stretch;

  .tabs-button {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    cursor: pointer;

    &:hover {
      border-bottom: 2px solid #ffa157;
    }
  }

  .isActived {
    border-bottom: 2px solid #ffa157;
  }
}

.search {
  // height: 100%;
  flex: 1;
  // background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;

  .search-item {
    max-width: 400px;
    width: 100%;
  }
}

.user {
  height: 100%;
  width: 300px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .avatar-box {
    margin-left: 20px;
    height: 50px;
    width: 85px;
    display: flex;
    align-items: center;

    .avatar {
      cursor: pointer;

      img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: 1px solid #ddd;

        &:hover {
          border: 1px solid #ffa157;
        }
      }

      margin-right: 5px;
    }
  }

  .arrow {
    svg:hover {
      color: #ffa157 !important;
      cursor: pointer;
    }
  }
}
</style>
